<template>
  <view>
    <view
      class="tabsModule"
      :style="{
        paddingTop: `${info.style.pTop * 2}rpx`,
        paddingLeft: `${info.style.pLeft * 2}rpx`,
        paddingRight: `${info.style.pRight * 2}rpx`,
        paddingBottom: `${info.style.pBottom * 2}rpx`,
        marginTop: `${info.style.mTop * 2}rpx`,
        marginLeft: `${info.style.mLeft * 2}rpx`,
        marginRight: `${info.style.mRight * 2}rpx`,
        marginBottom: `${info.style.mBottom * 2}rpx`,
        background: `${info.bgColor}`,
      }"
    >
      <view class="info1">
        <view
          class="tabsbox"
          v-for="(items, indexs, key) in info.value"
          :key="key"
          @click="imgChange(items)"
        >
          <view class="flex aitems jcenter" style="height: 100%">
            <view
              class="name"
              :style="{
                color: `${info.color}`,
                background: `${info.bgFilled == 1 ? info.filledColor : ''}`,
                borderRadius: `${info.radius * 2}rpx`,
              }"
            >
              {{ items.name }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { navigateTo } from "@/utils/navigateTo";
export default {
  props: {
    info: {
      default: {},
    },
  },
  mounted() {
    console.log(this.info);
  },
  methods: {
    imgChange(item) {
      navigateTo(item);
    },
  },
};
</script>

<style lang="scss" scoped>
.tabsModule {
  .info1 {
    height: 96rpx;
    white-space: nowrap;
    overflow-x: scroll;
    .tabsbox {
      display: inline-block;
      padding: 0px 12rpx;
      height: 100%;
      .name {
        font-size: 28rpx;
        min-width: 64rpx;
        padding: 8rpx 16rpx;
        text-align: center;
      }
    }
  }
  ::-webkit-scrollbar {
    display: none;
  }
}
</style>
